<div class="dashboard-wrapper">
  <div class="main-container">
    <div class="row-fluid">
        <div class="span12">
          <div class="widget">
            <div class="widget-header">
              <div class="title">
                <span class="fs1" aria-hidden="true" data-icon="&#xe088;"></span> Employee Information
              </div>
            </div>
            <div class="widget-body">
              <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th style="width:16%">Full Name</th>
                    <th style="width:16%">Income</th>
                    <th style="width:16%">Bonus</th>
                    <th style="width:16%">Years w/ MetaCorp</th>
                    <th style="width:16%">SSN</th>
                    <th style="width:16%">DoB</th>
                  </tr>
                </thead>
                <tbody>

                  <tr>
                    <td><%= "#{@user.first_name} #{@user.last_name}" %></td>
                    <td><%= @user.work_info.income %></td>
                    <td><%= @user.work_info.bonuses %></td>
                    <td><%= @user.work_info.years_worked %></td>
                    <td class="ssn"><%= @user.work_info.SSN %></td>
                    <!-- Begin Secure Version>-->
                    <!--<td class="ssn"><%#= @user.work_info.last_four %></td>-->
                    <!-- End Secure Version -->
                    <td><%= @user.work_info.DoB %></td>
                  </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

<script type="text/javascript">

// This should be an EXCELLENT feature!!!
function maskSSN(){
  var fullSSN = $("td.ssn").html().replace(/\d{3}.*?\d{2}/, "*****");
  $("td.ssn").html(fullSSN);

}

function makeActive(){
  $('li[id="employee_info"]').addClass('active');
};

$(document).ready(function () {
   maskSSN(),
   makeActive()
});

</script>
